<head>

<link rel="stylesheet" type="text/css" href="button.css" />

<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="ButtonToolTip.js"></script>

<script type="text/javascript">
Ext.onReady( function() {

    var button = new Ext.Button( {
        renderTo  : 'div_btn',
        text      : 'Click on me',
        minWidth     : 600,
        listeners : {
            click : function( cmp, e ) {

                // Create ButtonToolTip when button click
                Ext.ux.ButtonToolTip.attachTo( {
                    anchor   : this,
                    xy       : e.getXY(),
                    anchorEl : this.getEl(),
                    delay    : 2000,
                    items    : [ {
                        text    : 'Say Hello',
                        scope   : this, // define button scope here
                        handler : function() { alert('Hello'); }
                    },
                    { xtype : 'tbseparator' },
                    {
                        text    : 'Say World',
                        handler : function() { alert('World'); }
                    } ]
                } );
            }
        }
    } );

} );
</script>

</head>

<body>
<div id="div_btn"></div>
</body>
